
<template>
<div style="background-image: linear-gradient(to right top, #a1d1ff, #c2daff, #dce5ff, #f0f1ff, #ffffff);height:100%;width:100%;padding: 0;">
<div style="width:100%;"><h3>单层设置</h3></div>
  <div  class="top" style="display: flex">
  <div style="width: 150px"></div>
  <div class="top_left" style="width: 960px;height: 505px;border: black 2px solid" >
    <div class="top_left_top" style="display: flex">
      <div v-for="(pos,idx) in index" :key="idx" v-if="idx >=0 && idx <=5"
      style="background-color: red;width:150px;height:200px;margin-right: 10px;text-align: center; line-height: 220px;border: black 1px solid"
      >  <el-select v-model="index[idx]" placeholder="请选择">
        <el-option
            v-for="(item,idx2) in roomList"
            :key="item.ID"
            :label="item.name"
            :value="idx2">
        </el-option>
      </el-select></div>
    </div>
    <div style="height: 80px;border: black 1px solid;margin-top: 10px;margin-bottom: 10px">
      <p style="margin-left: 450px;width: 960px;margin-top: 30px;">走廊</p>
    </div>
    <div class="top_left_bottom" style="display: flex">
      <div v-for="(pos,idx) in index" :key="idx" v-if="idx >=6 && idx <=11"
           style="background-color: red;width:150px;height:200px;margin-right: 10px;text-align: center; line-height: 220px;border: black 1px solid"
      >  <el-select v-model="index[idx]" placeholder="请选择">
        <el-option
            v-for="(item,idx2) in roomList"
            :key="item.ID"
            :label="item.name"
            :value="idx2">
        </el-option>
      </el-select></div>
    </div>
    <div v-for="pos in index" :key="pos.idx"></div>
  </div>
  <div class="top_right"></div>
</div>
  <div class="bottom">
    <div  style="margin-top: 10px;margin-left:500px">
      <el-pagination
        small
        layout="prev, pager, next"
        :total="building.maxFloor"
        page-size="1"
        @current-change="handleCurrentChange" >
    </el-pagination></div>
    <el-button style="margin-left: 600px;margin-top: 5px" type="primary" @click="submit">提交</el-button>
  </div>
</div>
</template>

<script>
import {_modifyPositionOfRoomsInOneFloor, _selectRoomByBuildingIDAndFloor} from '../../../api/super_admin'

export default {
  created () {
    this.building = this.$route.params.building
    _selectRoomByBuildingIDAndFloor(this.building.id, this.floor).then(res => {
      // console.log(res)
      if (res.status) {
        this.index = []
        this.roomList = res.data
        for (let i = 0; i < 12; i++) {
          for (let j = 0; j < this.roomList.length; j++) {
            if (this.roomList[j].position === i) {
              this.index.push(j)
              break
            }
          }
        }
        // console.log(this.index)
      } else {
        this.$message({
          message: res.message,
          type: 'error'
        })
      }
    })
  },
  data () {
    return {
      floor: 1,
      building: null,
      roomList: [{
        position: 5,
        name: '16'
      }, {
        position: 1,
        name: '14'
      }, {
        position: 2,
        name: '15'
      }, {
        position: 3,
        name: '13'
      }, {
        position: 4,
        name: '17'
      }, {
        position: 0,
        name: '18'
      }, {
        position: 6,
        name: '19'
      }, {
        position: 7,
        name: '20'
      }, {
        position: 8,
        name: '21'
      }, {
        position: 9,
        name: '22'
      }, {
        position: 10,
        name: '23'
      }, {
        position: 11,
        name: '24'
      }],
      index: [],
      pageNo: 1
    }
  },
  methods: {
    handleCurrentChange (value) {
      this.pageNo = value
      console.log(this.building)
      _selectRoomByBuildingIDAndFloor(this.building.id, this.pageNo).then(res => {
        if (res.status) {
          this.roomList = res.data
          this.index = []
          for (let i = 0; i < 12; i++) {
            for (let j = 0; j < this.roomList.length; j++) {
              if (this.roomList[j].position === i) {
                this.index.push(j)
              }
            }
          }
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    submit () {
      console.log(this.roomList)
      let judge = true
      for (let i = 0; i < 12; i++) {
        for (let j = i + 1; j < 12; j++) {
          if (this.index[i] === this.index[j]) {
            judge = false
          }
        }
      }
      if (judge) {
        for (let i = 0; i < 12; i++) {
          this.roomList[this.index[i]].position = i
        }
        _modifyPositionOfRoomsInOneFloor(this.roomList).then(res => {
          if (res.status) {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        })
      } else {
        this.$message({
          type: 'warning',
          message: '房间名重复'
        })
      }
    }
  }
}
</script>
<style scoped>

</style>
